import React, { Component } from 'react'
import './index.less'
import PropTypes from 'prop-types'
import { observer } from 'mobx-react/custom'

@observer
export default class PostContent extends Component {

  clickItem (data) {
    this.props.onClickItem && this.props.onClickItem(data)
  }

  render () {
    const { data } = this.props
    const imgsCount = data.PicList && data.PicList.length
    return (
      <div>
        <div onClick={this.clickItem.bind(this, data)}>
          <div className='discuss-title'>
            <p style={{'display': '-webkit-box', 'WebkitLineClamp': 3, 'WebkitBoxOrient': 'vertical', 'overflow': 'hidden'}}>{data.Content}</p>
          </div>
          <div className='user-images flex-wrap'>
            {
              imgsCount > 0 &&
              data.PicList.map((item, index) => {
                if (index < 3) {
                  if (imgsCount === 1) {
                    return (
                      <div key={index} className='flex-1 images-box images-box-home one-image' style={{backgroundImage: 'url(' + item + ')'}} />
                    )
                  } else if (imgsCount === 2) {
                    return (
                      <div key={index} className='flex-1 images-box images-box-home two-image' style={{backgroundImage: 'url(' + item + ')'}} />
                    )
                  } else {
                    return (
                      <div key={index} className='flex-1 images-box images-box-home three-image' style={{backgroundImage: 'url(' + item + ')'}}>
                        {index === 2 && imgsCount > 3 && <p>+{imgsCount - 3}</p>}
                      </div>
                    )
                  }
                }
              })
            }
          </div>
        </div>
      </div>
    )
  }
}

PostContent.propTypes = {
  data: PropTypes.object,
  onClickItem: PropTypes.func
}
